<template>
  <div class="wy_sys">
    <div class="top c-flex c-a-c" v-if="common">
      <div class="logo">
        <img src="./assets/images/logo.png" width="100%" height="100%">
      </div>
      <div class="c-box-flex ml20" style="font-size:20px;">网娱大师后台系统</div>
      <div class="c-flex">
        <div>{{name}}</div>
        <div class="name cursor" @click="loginout">注销</div>
      </div>
    </div>
    <div class="main_content c-flex">
      <div class="content_cell menu" v-if="common">
        <el-row class="tac">
          <el-menu
            :default-active="$route.path"
            :router="true"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <span>商城管理</span>
              </template>
              <el-submenu index="1-1">
                <template slot="title">商品管理</template>
                <el-menu-item index="/peripheralList">数码商品管理</el-menu-item>
                <el-menu-item index="/gameAccount">游戏账号管理</el-menu-item>
                <el-menu-item index="/gameTools">游戏道具管理</el-menu-item>
                <el-menu-item index="/gameAccelerator">加速器管理</el-menu-item>
              </el-submenu>
              <el-submenu index="1-2">
                <template slot="title">订单管理</template>
                <el-menu-item index="/shopOder">数码商品订单</el-menu-item>
                <el-menu-item index="/eAccount">游戏账号订单</el-menu-item>
                <el-menu-item index="/eProp">游戏道具订单</el-menu-item>
                <el-menu-item index="/eAccelerator">加速器订单</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <span>Q币管理</span>
              </template>
              <el-menu-item index="/orderList">订单记录</el-menu-item>
              <el-menu-item index="/goodsManage">商品管理</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <span>APP管理</span>
              </template>
              <el-menu-item index="/userList">用户列表</el-menu-item>
              <el-menu-item index="/netBarUserList">网吧主列表</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-row>
      </div>
      <div class="content_cell right" style=" flex: 1;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      common: true,
      name: sessionStorage.getItem("username")
        ? sessionStorage.getItem("username")
        : ""
    };
  },
  mounted() {
    if (this.$route.path == "/loginIn") {
      this.common = false;
    } else {
      this.common = true;
    }
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    loginout() {
      this.$confirm("是否确认退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.push({ path: "/loginIn" });
          this.$message({
            type: "success",
            message: "退出登录成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    }
  },
  watch: {
    $route() {
      if (this.$route.path == "/loginIn") {
        this.common = false;
      } else {
        this.common = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.wy_sys {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 60px;
}

.top {
  width: 100%;
  height: 60px;
  background-color: rgba(63, 63, 63, 1);
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: space-between;

  .logo {
    width: 40px;
    height: 40px;
    margin-left: 20px;
  }

  .name {
    margin: 0 20px;
  }
}

.main_content {
  display: flex;
  width: 100%;
  height: 100%;

  .content_cell {
    &.menu {
      min-width: 200px;
      height: 100%;
      background-color: rgb(84, 92, 100);

      .el-row {
        width: 100%;
      }
    }

    &.right {
      margin: 25px;
      flex: 0 82%;
      background: #fff;
      overflow: auto;
      display: flex;
    }
  }
}
</style>